@model WalkingTec.Mvvm.Core.BaseVM
<style>
    a {
        color: #01aaed
    }
</style>
<wt:fieldset field-set-style="Simple" title="前后端分离模式">
    <p>虽然在我眼中，一个后台管理程序完全没有必要前后端分离，但是时代在发展，大家对于后台管理程序的界面要求也越来越高，产品经理们也在不断努力将ToC的交互性应用到ToB的管理程序中。
    <p>一旦进行前后端分离，就不可避免的提高了人员成本，沟通成本和代码的复杂程度。</p>
    <p>WTM的前后端分离模式定义了一套普遍适用的前后端接口规范，实现了前端、后端，api文档一键生成，最大限度的降低开发成本，提高开发效率</p>
</wt:fieldset>

<wt:fieldset field-set-style="Simple" title="使用分离模式">
    <wt:quote>
        <p>你可以直接线上生成前后端分离的项目，点<a href="/setup" target="_blank">这里</a> 可以直接为你生成包含解决方案的zip包，下载，解压，vs打开即可</p>
    </wt:quote>

    <ul class="doc">
        <li>
            和不分离的项目类似，只是在运行setup的时候，选择React模式（后续也会支持VUE），如图<br /><br />
            <img src="~/imgs/react1.png" width="1200" /><br /><br />
        </li>
        <li>
            生成完项目之后，按F5运行，第一次运行会下载很多javascrip的依赖包，时间较长请耐心等待，运行结果如图<br /><br />
            <img src="~/imgs/react3.png" width="1200"/><br /><br />
            <wt:quote>
                <p>建议使用淘宝的npm镜像来加快依赖包的安装速度</p>
            </wt:quote>
        </li>
        <li>
            通过右上角的菜单，我们可以启动代码生成器来根据model生成代码，同时可以访问接口的swagger文档<br />
            关于如何使用代码生成器，请参考<a href="/#/QuickStart/FirstModule">第一个模块</a><br />
            生成代码的步骤是相同的，只不过在前后端分离的模式下，会生成后台api和前台react页面
        </li>
        <li>
            前台代码会在ClientApp目录中，当我们在VisualStudio中调试的时候，它会自动启动后台和前台，非常方便<br />
            ClientApp目录是一个完整的React项目，纯前端人员可以使用Code之类的编译器直接打开ClientApp目录，和其他React项目没有区别<br />
            纯前端人员一般是不喜欢装Visual Studio的，可以让前端人员只安装.net core sdk (2.2以上)，然后通过命令行在项目所在目录输入 dotnet run --launch-profile ApiOnly ,这样就可以直接启动后台api，他就能自己随意玩耍了。
        </li>

    </ul>
</wt:fieldset>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
